<template>
  <div class="foot">
    <footer class="center">
        <div class="left">
          <p v-for="(item,index) in foot1" :key="index"><router-link :to="item.url">{{item.name}}</router-link></p>
        </div>
        <div class="right" v-for="(item,index) in foot2" :key="index">
          <div class="right1">
            <div class="rig11">
              <p class="phone">健康热线：{{item.phone}}</p>
              <p class="url">网址：{{item.wangzhi}}</p>
            </div>
            <div class="right12">
              <img src="../assets/footer_code.png" alt="">
            </div>
            <div class="right13">
              <!-- {{item.hao}} -->扫码关注公众号
            </div>
          </div>
          <div class="right2">
            {{item.beizhu}}
          </div>
        </div>
    </footer>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data:function(){
    return{
      foot1:[
        // {text:'关于我们',url:'/'},
        // {text:'寻医问药',url:'/'},
        // {text:'联系我们',url:'/'},
        // {text:'广告服务',url:'/'},
        // {text:'人才招聘',url:'/'},
        // {text:'汇款方式',url:'/'},
        // {text:'留言反馈',url:'/'},
        // {text:'论坛',url:'/'},
        // {text:'电子地图',url:'/'}
      ],
      foot2:[
        {
          phone:'健康热线： 18943108171（微信同）',
          url:'网址：2017Zhukang120.net',
          code:require('../assets/footer_code.png'),
          hao:'扫码关注公众号',
          text:'本网站以弘扬传统中医文化,解除患者病痛为己任,验方所用药物配方科学,全国各地大多数正规药店均能配齐;经临床验证,疗效奇特,愈后不易复发.'
        }
      ]
      
    }
  },
  mounted:function(){
    axios
      .get('/index/endnav')
      .then(res=>{
        this.foot1=res.data.data
      })
  },
  created:function(){
    axios
    .get('/index/logo')
    .then(res=>{this.foot2=res.data.data})
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.foot{width: 100%;background: #A0270C;color: #fff;font: size 24px;letter-spacing: 4px;padding-top: 90px;padding-bottom: 84px;}
footer{display: flex;justify-content: space-between;}
footer .left{width:30%;box-sizing: border-box;display:flex;justify-content: flex-end;flex-wrap: wrap;}
footer .left p{border-left: 2px solid #fff;width: 50%;box-sizing: border-box;margin-top: 10px;text-indent: 1rem; }
footer .left p a{color: #fff;}
footer .right{width:70%;border-left:1px solid #fff;box-sizing:border-box;}
footer .right .right1{width:78%;margin:0 auto;
display:flex;justify-content:space-between;}
footer .right .right1 .url{padding-top:53px;}
footer .right .right1 .right11{width:50%;}
footer .right .right1 .right12{width:30%;text-align: right;}
footer .right .right1 .right13{width:20%;background: #fff;height:46px;line-height:46px;border-radius:23px;color: #A0270C;text-align: center;margin-top:5%;font-weight: bold;}
footer .right .right1 .right12 img{width: 124px;height: 124px;}
footer .right .right2{width:78%;margin: 0 auto;padding-top: 26px;}
</style>
